<template>
  <div class="wrapper">
    <div class="wrapper-top">
      <div class="title">就诊/住院/手术记录</div>
      <div class="have-dept">
        <el-button icon="el-icon-arrow-left" class="change-scrollbar" type="info" @click="clickArrowLeft" />
            <el-scrollbar ref="elbar" style="width:85%;height:150px">
          <div class="card-list">
            <template v-for="(item) in HistoryInfo">
              <el-card
                :key="item.deptcode"
                shadow="hover"
                class="card-info-item"
              >
                <div class="card-info">
                  <div class="info-deptname">
                    <div>{{ item.disname }}</div>
                  </div>
                  <div class="info-number">
                    <div class="info-inpnum">
                      <div class="number-title">{{ item.enddate }}</div>
                    </div>
                  </div>
                </div>
              </el-card>
            </template>
          </div>
        </el-scrollbar>
        <el-button icon="el-icon-arrow-right" class="change-scrollbar" type="info" @click="clickArrowRight" />
      </div>
    </div>
    <div class="wrapper-bottom">
      <div class="wrapper-left">
        <div class="title">药疗医嘱信息</div>
        <div class="query">
          <div class="check">
            <div class="c_right">
              <div class="clear">
                <div class="fl">
                  <span class="c_tip">用药时间</span>
                  <el-date-picker
                    v-model="GetHistoryDrugInfoJson.StartDate"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy/MM/dd"
                    format="yyyy/MM/dd"
                  />
                  至
                  <el-date-picker
                    v-model="GetHistoryDrugInfoJson.EndDate"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy/MM/dd"
                    format="yyyy/MM/dd"
                  />
                </div>
              </div>
              <div class="clear">
                <div class="fl">
                  <span class="c_tip">医嘱内容</span>
                  <el-input v-model="GetHistoryDrugInfoJson.DrugName" clearable type="text" placeholder="输入医嘱内容" />
                </div>
                <div class="fl">
                  <span class="c_tip">药品属性</span>
                  <el-select
                    v-model="GetHistoryDrugInfoJson.DrugType"
                    filterable
                    clearable
                    placeholder="请选择"
                    class="c_select"
                  >
                    <el-option
                      v-for="item in DrugTypeList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
              </div>
              <div class="sbtn_box">
                <el-button type="primary" size="mini"  @click="getHistoryDrugInfo">查询</el-button>
                <el-button type="danger" size="mini" @click="clearGetHistoryDrugInfoJson">重置</el-button></div>
            </div>
            <el-scrollbar ref="elbar1"  style="width:480px;height:150px">
              <Bluetable
                ref="blueTable"
                :t-head="HistoryDrugInfoHeader"
                :t-data="HistoryDrugInfo"
              />
            </el-scrollbar>
          </div>
        </div>

      </div>
      <div class="wrapper-right">
        <div class="title">检验信息</div>
        <div class="query">
          <div class="check">
            <div class="c_right">
              <div class="clear">
                <div class="fl">
                  <span class="c_tip">用药时间</span>
                  <el-date-picker
                    v-model="GetHistoryLabInfoJson.StartDate"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy/MM/dd"
                    format="yyyy/MM/dd"
                  />
                  至
                  <el-date-picker
                    v-model="GetHistoryLabInfoJson.EndDate"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy/MM/dd"
                    format="yyyy/MM/dd"
                  />
                </div>
              </div>
              <div class="clear">
                <div class="fl">
                  <span class="c_tip">申请、结果名称</span>
                  <el-input v-model="GetHistoryDrugInfoJson.LabName" clearable type="text" placeholder="输入申请、结果名称" />
                </div>
              </div>
              <div class="sbtn_box">
                <el-button type="primary" size="mini" @click="getHistoryLabInfo">查询</el-button>
                <el-button type="danger" size="mini" @click="clearGetHistoryLabInfoJson">重置</el-button></div>
            </div>
            <el-scrollbar ref="elbar2" style="width:480px;height:150px">
              <Bluetable
                ref="blueTable"
                :t-head="HistoryLabInfoHeader"
                :t-data="HistoryLabInfo"
              />
            </el-scrollbar>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { GetHistoryInfo, GetHistoryDrugInfo, GetHistoryLabInfo } from '@/api/cpw'
export default {
  name: 'HistoryInfo',
  props: {
    patientDetailFather: {
      type: Object
    }
  },
  data() {
    return {
      patientDetail: {
        // idcard: '431127198805152320'
      },
      HistoryInfo: [],
      GetHistoryDrugInfoJson: {
        StartDate: '',
        EndDate: '',
        DrugType: '',
        DrugName: ''
      },
      DrugTypeList: [
        {
          value: '1',
          label: '抗菌药物'
        }, {
          value: '2',
          label: '中成药'
        }, {
          value: '3',
          label: '中药饮片'
        }, {
          value: '4',
          label: '化学药品'
        }, {
          value: '5',
          label: '基本药物'
        }],
      HistoryDrugInfo: [],
      HistoryDrugInfoHeader: [
        {
          prop: 'ordername',
          label: '医嘱内容'
        }, {
          prop: 'usagedosage',
          label: '用法用量'
        }, {
          prop: 'remark',
          label: '补充说明'
        }, {
          prop: 'startdatetime',
          label: '时间'
        }, {
          prop: 'deptname',
          label: '科室'
        }, {
          prop: 'doctorname',
          label: '医生'
        }
      ],
      GetHistoryLabInfoJson: {
        StartDate: '',
        EndDate: '',
        LabName: ''
      },
      HistoryLabInfo: [],
      HistoryLabInfoHeader: [
        {
          prop: 'labname',
          label: '申请项目名称'
        }, {
          prop: 'itemname',
          label: '检验结果名称'
        }, {
          prop: 'labresult',
          label: '检验结果'
        }, {
          prop: 'resultflag',
          label: '结果标志'
        }, {
          prop: 'range',
          label: '参考范围'
        }, {
          prop: 'unit',
          label: '范围'
        }
      ]
    }
  },
  watch: {
    patientDetailFather(val, oldVal) {
      this.patientDetail = val
      this.getHistoryInfo()
    }
  },
  methods: {
    // 获取用户的历史诊疗信息（根据身份证号idcard）
    async getHistoryInfo() {
      await GetHistoryInfo({
        idcard: this.patientDetail.idcard
      }).then(res => {
        this.HistoryInfo = res.HistoryInfo
      }).catch(err => {
        console.log(err)
      })
    },

    async getHistoryDrugInfo() {
      await GetHistoryDrugInfo({
        json: {
          StartDate: this.GetHistoryDrugInfoJson.StartDate,
          EndDate: this.GetHistoryDrugInfoJson.EndDate,
          DrugType: this.GetHistoryDrugInfoJson.DrugType,
          DrugName: this.GetHistoryDrugInfoJson.DrugName,
          Idcard: this.patientDetail.idcard
        }
      }).then(res => {
        this.HistoryDrugInfo = res.HistoryDrugInfo
      }).catch(err => {
        console.log(err)
      })
    },

    async getHistoryLabInfo() {
      await GetHistoryLabInfo({
        json: {
          StartDate: this.GetHistoryLabInfoJson.StartDate,
          EndDate: this.GetHistoryLabInfoJson.EndDate,
          LabName: this.GetHistoryDrugInfoJson.LabName,
          Idcard: this.patientDetail.idcard
        }
      }).then(res => {
        this.HistoryLabInfo = res.HistoryLabInfo
      }).catch(err => {
        console.log(err)
      })
    },
    // 点击左右按钮，控制scrollLeft
    clickArrowLeft() {
      const scrollLeft = this.$refs['elbar'].wrap.scrollLeft
      this.$refs['elbar'].wrap.scrollLeft = scrollLeft - 200
    },
    clickArrowRight() {
      const scrollLeft = this.$refs['elbar'].wrap.scrollLeft
      this.$refs['elbar'].wrap.scrollLeft = scrollLeft + 200
    },
    clearGetHistoryDrugInfoJson() {
      this.GetHistoryDrugInfoJson = {
        StartDate: '',
        EndDate: '',
        DrugType: '',
        DrugName: ''
      }
    },
    clearGetHistoryLabInfoJson() {
      this.GetHistoryLabInfoJson = {
        StartDate: '',
        EndDate: '',
        LabName: ''
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .wrapper{
    padding: 10px;
    display: flex;
    flex-direction: column;
    .wrapper-top{
      width: 100%;
      background-color: #FFFFFF;
      border-radius: 5px;
      padding: 5px;
      .title{
        border-left: 2px solid #2f90fd;
        padding-left: 10px;
      }
    }
    .wrapper-bottom{
      margin-top: 10px;
      display: flex;
      .wrapper-left{
        width: 520px;
        padding: 5px;
        flex: 1;
        background-color: #FFFFFF;
        border-radius: 5px;
        .title{
          border-left: 2px solid #2f90fd;
          padding-left: 10px;
        }
      }
      .wrapper-right{
        width: 520px;
        padding: 5px;
        margin-left: 5px;
        flex: 1;
        background-color: #FFFFFF;
        border-radius: 5px;
        .title{
          border-left: 2px solid #2f90fd;
          padding-left: 10px;
        }
      }
    }
  }
  .query{
    width:100%;
    height:100%;
    .check{
      font-size:12px;
      line-height:40px;
      background:#fff;
      text-align:center;
      .c_left{
        width:115px;
        float:left;
        line-height:65px;
      }
      .c_right{
        overflow:hidden;
        padding:5px 0;
        position:relative;
        .show_btn{
          position:absolute;
          right:20px;
          bottom:15px;
          border:1px solid #e1e1e1;
          background:#f9fafc;
          border-radius:2px;
          text-align:center;
          line-height:32px;
          width:104px;
          height:32px;
          font-size:14px;
          color:#9f9f9f;
          cursor: pointer;
        }
        .fl{
          margin-bottom:10px;
        }
        .c_tip{
          display:inline-block;
          width:80px;
          padding-right:10px;
          text-align:right;
        }
        .c_input{
          width:120px;
          height:40px;
          border:1px solid #dcdfe6;
          border-radius:4px;
          padding-left:5px;
        }
        .c_input::-webkit-input-placeholder {
          color: #dcdfe6;
        }
        .c_input::-ms-input-placeholder {
          color: #dcdfe6;
        }
        .c_input::-moz-input-placeholder {
          color: #dcdfe6;
        }
        .c_search{
          width:90px;
        }
        .c_searchbtn{
          display:inline-block;
          width:34px;
          height:25px;
          margin-left:3px;
          background:#28a4f4;
          color:#fff;
          font-size:12px;
          text-align:center;
          line-height:26px;
          border-radius:6px;
          cursor:pointer;
        }
        .c_checkbox{
          width:230px;
          height:40px;
          display:inline-block;
          margin-left:-12px;
        }
        .btn_clear{
          padding:0;
          /*width:60px;*/
          /*height:40px;*/
          /*line-height:40px;*/
        }
        .sbtn_box{
          text-align:left;
          padding-left:82px;
        }
        .c_select{
          width:130px;
        }
        @media screen and (min-width:1466px){
          .c_select{
            width:150px;
          }
          .btn_clear{
            padding:0;
            width:70px;
            height:40px;
            line-height:40px;
          }
          .c_input{
            width:150px;
          }
          .c_search{
            width:100px;
          }
          .c_searchbtn{
            width:42px;
            margin-left:4px;
          }
          .c_tip{
            width:100px;
          }
        }
      }
    }
    .list_tip{
      font-size:14px;
      color:#29a4f2;
      padding:10px 18px;
    }
    .table_box{
      padding:0 18px;
    }
  }
  .have-dept{
    width: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
    .change-scrollbar{
      width: 30px;
      height: 65px;
      margin: 15px;
      font-size: 20px;
      background:#28a4f4;
      border: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .card-list{
      display: flex;
      .card-info-item{
        flex: 0 0 200px;
        width: 200px;
        height: 120px;
        margin: 15px;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .closeIcon{
          font-size: 16px;
          text-align: right;
          z-index: 2;
          margin-top: -15px;
          padding-right: 5px;
        }
        .card-info {
          display: flex;
          flex-direction: column;
          align-content: space-around;
          justify-content: space-around;
          .info-deptname{
            font-size: 16px;
            color: #2f90fd;
            text-align: center;
          }
          .info-number{
            display: flex;
            justify-content: space-around;
            font-size: 14px;
            padding: 10px 0;
          }
          .info-time{
            font-size: 14px;
            display: flex;
            justify-content: space-around;
          }
        }
      }
    }
  }
  /deep/.el-input{
    width:150px;
    border-radius:4px;
    padding-left:5px;
    font-size: 12px;
  }
</style>
